<template>
  <div class="interval">
    <span> {{ "0" + hour }} </span> : <span> {{ minute | round }} </span> :
    <span> {{ second | round  }} </span>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      hour: 0,
      minute: 10,
      second: 0,
      timer: null,
    };
  },
  watch: {
    timer: {
      handler(val) {
        if (val === null) {
          this.minute = 10;
          this.handleInterval();
        }
      },
    },
  },
  methods: {
    //   定时器
    handleInterval() {
      this.timer = setInterval(() => {
        if (this.second == 0) {
          if (this.minute !== 0) {
            this.second = 59;
            this.minute -= 1;
          } else {
            this.timer = null;
          }
        } else {
          this.second--;
        }
      }, 1000);
    },
  },
  created() {
    this.handleInterval();
  },
};
</script>

